<template>
	<view class="jiu">
		<view class="box">
			<!-- 搜索框 -->
			<view class="mySearch">
				<u-search @change="onSearch" placeholder="搜索医院、科室、医生、疾病"  :clearabled="true"
					v-model="PopUpSarCh" :focus="true" :showAction="true" actionText="搜索"></u-search>
			</view>
			<view class="SearchResults">
				<view class="SearchContent" v-for="(item, index) in records">
					<view class="rich_text" @click="goHosp(item)">
						<rich-text :nodes="item.ceshi"></rich-text>
					</view>

					<view class="sear_result">
						共有<span class="sear_num">{{item.count}}</span>个结果
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import parse from 'mini-html-parser2'
	import homeApi from '@/api/home'
	import {
		searchThink
	} from '@/api/home/search.js'
	export default {
		data() {
			return {
				list: [],
				PopUpSarCh: "",
				show: false,
				records: [],
				content: ""
			}
		},
		methods: {
			// 搜索框方法
			async onSearch() {
				//每次搜索前清空
				this.$store.state.doc.PopUpSarCh = this.PopUpSarCh //存入vuex中，供其他页面调用
				//console.log(this.$store.state.doc.PopUpSarCh);
				this.list = [];
				this.records = []
				if (this.PopUpSarCh) {
					let res = await searchThink(this.PopUpSarCh)
					// if (res.code !== 4000) {
					// 	this.$u.toast('搜索结果异常', 2000)
					// 	return
					// }
					this.list.push(...res.data.hos, ...res.data.dept, ...res.data.doctor, ...res.data.disease);
					this.changeColor(this.list); //调用搜索词方法
				}
			},
			changeColor(result) {
				let searchWordList = this.PopUpSarCh.split('')
				//console.log(searchWordList)
				//result为接口返回的数据
				result.map((item, index) => {
					if (this.PopUpSarCh) {
						searchWordList.map((v, k) => {
							//	let replaceReg = new RegExp(this.PopUpSarCh, "ig");
							let replaceReg = new RegExp(v, "ig");
							//let replaceString = `<span style="color: #ed4014">${this.PopUpSarCh}</span>`;
							let replaceString = `<span style="color: #1677FF ">${v}</span>`;
							result[index].count = item.count;
							result[index].id = item.id;
							if (k == 0) { //第一次进入获得返回的关键词，第二次遍历就不去赋值，避免添加span标签
								result[index].source = item.name
							}
							result[index].name = item.name.replace(replaceReg, replaceString);
							//console.log(v,item);
						})

					} else {
						this.$nextTick(() => {
							this.records = [] //用户清除搜索结果，列表清空
						})
					}
				});
				this.records = result;
				//console.log(this.records, "123")
				let htmlNodes = []; //声明（防报错，不报错也可以不声明）
				this.records.forEach(el => {
					parse(el.name, (err, htmlNode) => {
						if (!err) {
							//console.log(htmlNode);
							el.ceshi = htmlNode
						}
					})
				})
			},

			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			goHosp(params) {
				let keyWord = params.source
				// console.log(keyWord);
				// return
				this.$store.state.doc.keyWord.value = keyWord
				this.$store.state.doc.topSearchButton = 1 //选第一个
				uni.navigateTo({
					url: `/pages/sousuo/search_hosp/index`
				});
			}
		},
		onShow() {
			// if (my.canIUse('hideBackHome')) {
			// 	my.hideBackHome();
			// }
		},
	}
</script>

<style lang="scss" scoped>
	.jiu {
		width: 100%;
		overflow: hidden;
		background-color: #fff;
		//height: 100vh;

		.box {
			padding-bottom: 100rpx;

			.mySearch {
				margin: 0  30rpx;
			}

			.SearchResults {
				margin-top: 10rpx;

				.SearchContent {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 10rpx 30rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #3D3D3D;
					line-height: 34rpx;

					.rich_text {
						background: #F5F6F8;
						border-radius: 13px 13px 13px 13px;
					}

					.sear_result {
						font-size: 20rpx;
						font-weight: 400;
						color: #999999;
						line-height: 28rpx;

						.sear_num {
							//font-size: 22rpx;
							color: #3D3D3D;
						}
					}
				}
			}
		}
	}
</style>